<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script>
    //    var name = 'a'  // window.name = 'a'

    //    var objX = {
    //         name:'x',
    //         sayName:function(){ 
    //             console.log(this);
    //             console.log(this.name);
    //         }
    //    }

    //    var objY={
    //        name:'y'
    //    }
  
    //    objX.sayName()  //'x' // this指向自己objX

    //    objX.sayName.call(objY)  // 'y'  // this指向具体对象objY

    //    objX.sayName.call() //'a' // this指向全局对象 window

       // 普通函数 this 根调用对象函数有关 & 改变this 指向有关
   </script> 
   <script>
    //    var name = 'a'  // window.name = 'a'

    //    var objX = {
    //         name:'x',
    //         sayName:()=>{ 
    //             console.log(this);
    //             console.log(this.name);
    //         }
    //    }

    //    var objY={
    //        name:'y'
    //    }
  
    //    objX.sayName()  //'a' // this指向自己objX

    //    objX.sayName.call(objY)  // 'y'  // this指向具体对象objY

    //    objX.sayName.call() //'a' // this指向全局对象 window

       // 箭头函数: 定义函数时 所在作用域() 所指向的对象  (外层函数包裹 js环境: window)
      //  失效: 调用失效 / 强制改变this指向也失效
   </script> 

<script>
    // var name = 'a'  // window.name = 'a'

    // var objX = {
    //      name:'x',
    //      sayName:function(){ 
    //          console.log(this);
    //          console.log(this.name);
    //      }
    // }

    // // objX.sayName()   //x

    // var copyFun = objX.sayName

    // copyFun() // 没有显示调用 =>window 调用=>this指向window

</script> 

<script>
    'use strict'

    // 严格模式 开启 ,没有显示调用 =>this 不会自动绑定全局对象 window

    // var name = 'a'  // window.name = 'a'

    // var objX = {
    //      name:'x',
    //      sayName:function(){ 
    //          console.log(this);
    //          console.log(this.name); // Cannot read properties of undefined
    //      }
    // }

    // // objX.sayName()   //x

    // var copyFun = objX.sayName

    // copyFun() // copyFun()=>sayName()=>this.name=>undedined.name;  
</script>

<script>
    class C {
         go(){ 
             console.log(this); // 
         }


         //react : 自定义函数 传给react ,再去实行
         //0 严格模式 es6 class中声明方法自动使用了严格模式   1 var fun = this.go   2 fun() 隐士调用(tihs不会自动绑定window)
         callback(fun){  
            fun()  
         }

         render(){
            this.callback(this.go)
         }
    }

    var c = new C()
    c.go() // this 类实例  (类似 类组件实例)
    c.render() //  undefined

</script>
   


</body>
</html>